<template>
  <div class="main-container">
    <!-- 我的统计 -->
    <div class="search_box">
      <div class="search-box-left">
         <!-- 请选择月份 -->
        <div>
          <el-date-picker v-model="year_month" @change="searchHandle" value-format="timestamp" type="month"
            placeholder="请选择月份">
          </el-date-picker>
        </div>
      </div>
      <div class="search-box-right">
        <!-- 导出打卡详情 -->
        <div class="search_btn">
          <el-button size="small" @click="exportDetail" type="primary"><i
              class="el-icon-download el-icon--left"></i>导出打卡详情</el-button>
        </div>
        <!-- 导出打卡统计 -->
        <div class="search_btn">
          <el-button size="small" @click="exportData" type="primary"><i class="el-icon-download el-icon--left"></i>导出打卡统计
          </el-button>
        </div>
      </div>
    </div>

    <div class="analysis">
      <div class="right1">
        <ul class="analysis_list1">
             <li>
              <div class="hourss">
                {{headDate}}
              </div>
            </li>
        </ul>
        <ul class="analysis_list">
          <!-- 占位 -->
          <li>
              <div class="hours" v-show="false">
                {{ headMonthData.average_working_hours ? Math.floor(headMonthData.average_working_hours) :
                  headMonthData.average_working_hours}}
              </div>
              <div v-show="false">平均工时(小时)</div>
          </li>
          <!-- 平均工时 -->
          <li>
            <div class="hours">{{ headMonthData.average_working_hours ? Math.floor(headMonthData.average_working_hours) :
                headMonthData.average_working_hours
            }}</div>
            <div>平均工时(小时)</div>
          </li>
          <!-- 迟到 -->
          <li>
            <div :class="headMonthData.late > 0 ? 'hours-danger':'hours'">{{ headMonthData.late }}</div>
            <div>迟到(次)</div>
          </li>
          <!-- 早退 -->
          <li>
            <div :class="headMonthData.leave_early > 0 ? 'hours-danger':'hours'">{{ headMonthData.leave_early }}</div>
            <div>早退(次)</div>
          </li>
          <!-- 缺卡 -->
          <li>
            <div :class="headMonthData.missing > 0 ? 'hours-danger':'hours'">{{ headMonthData.missing }}</div>
            <div>缺卡(次)</div>
          </li>
          <!-- 旷工 -->
          <li>
            <div :class="headMonthData.absenteeism > 0 ? 'hours-danger':'hours'">{{ headMonthData.absenteeism }}</div>
            <div>旷工(次)</div>
          </li>
          <!-- 外勤 -->
          <li>
            <div class="hours">{{ headMonthData.field }}</div>
            <div>外勤(次)</div>
          </li>
          <!-- 加班 -->
          <li>
            <div class="hours">{{ headMonthData.work_overtime }}</div>
            <div>加班(小时)</div>
          </li>
          <!-- 出差 -->
          <li>
            <div class="hours">{{ headMonthData.business_trip }}</div>
            <div>出差(天)</div>
          </li>
          <!-- 请假 -->
          <li>
            <div class="hours">{{ headMonthData.ask_leave }}</div>
            <div>请假(次)</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="table_title">部门考勤记录</div>
    <div class="table_box" v-loading="loading">
      <!-- 姓名、工号、部门、考勤组、入职日期、转正日期、考勤月份、应出勤天数、实际出勤天数、是否缺勤 -->
      <div class="table_header flex2">
        <div class="table_header_items">姓名</div>
        <div class="table_header_items">工号</div>
        <div class="table_header_items">部门</div>
        <div class="table_header_items">考勤组</div>
        <div class="table_header_items">入职日期</div>
        <div class="table_header_items">转正日期</div>
        <div class="table_header_items">考勤月份</div>
        <div class="table_header_items">应出勤(天)</div>
        <div class="table_header_items">实际出勤(天)</div>
        <div class="table_header_items">是否缺勤</div>
      </div>

      <div class="table_body flex2" v-if="tableData.en_code">
        <div class="table_body_items user_name" @click="toDetails">{{ tableData.user_name }}</div>
        <div class="table_body_items">{{ tableData.en_code ? tableData.en_code : '暂无' }}</div>
        <div class="table_body_items">{{ tableData.dept_name ? tableData.dept_name : '暂无' }}</div>
        <div class="table_body_items">
          {{ tableData.group_name ? tableData.group_name : '暂无' }}
        </div>
        <div class="table_body_items">{{ toDate(tableData.office_date) }}</div>
        <div class="table_body_items">{{ tableData.regular_date == 0 ? '暂未转正' : toDate(tableData.regular_date) }}</div>
        <div class="table_body_items">{{ toDay(tableData.att_date) }}</div>
        <div class="table_body_items">{{ tableData.should_attendance_num }}</div>
        <div class="table_body_items">{{ tableData.real_attendance_num }}</div>
        <div class="table_body_items user_names" :class="tableData.full_attendance ? 'yes' : 'no'">{{ tableData.full_attendance ? '是' : '否' }}</div>
      </div>
      <div class="no-data-box" v-else>
        <img src="../../../assets/flowlist/no-data.png">
      </div>
    </div>
    <!-- 考勤详情 -->
    <el-dialog title="考勤详情" width="60%" 
      v-dialogDrag
      :close-on-click-modal="false"
      :visible.sync="userDialog">
      <div class="content_listbox">
        <!-- <div class="list_boxses">
          <div class="title_xinxi">员工姓名</div>
          <div class="value_box" v-if="seeData">
            <span class="smoem">
              <i class="el-icon-user"></i>
            </span>
            {{ seeData.user_name }}
          </div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">考勤组</div>
          <div class="value_box">{{ seeData.group_name }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">工号</div>
          <div class="value_box">{{ seeData.en_code }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">部门</div>
          <div class="value_box">{{ seeData.dept_name }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">入职日期</div>
          <div class="value_box">{{ seeData.officeDate }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">转正日期</div>
          <div class="value_box">{{ seeData.regular_date == 0 ? '暂未转正' : tableData.regular_date }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">应出勤天数</div>
          <div class="value_box">{{ seeData.should_attendance_num }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">考勤月份</div>
          <div class="value_box">{{ seeData.schedual_month }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">实际出勤天数</div>
          <div class="value_box">{{ seeData.real_attendance_num }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">外出（小时）</div>
          <div class="value_box">{{ seeData.go_out }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">外勤（天）</div>
          <div class="value_box">{{ seeData.field_time }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">事假（小时）</div>
          <div class="value_box">{{ seeData.compassionate_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">旷工（天）</div>
          <div class="value_box">{{ seeData.absenteeism_late }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">调休（小时）</div>
          <div class="value_box">{{ seeData.compensatory_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">迟到次数</div>
          <div class="value_box">{{ seeData.late }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">病假（小时）</div>
          <div class="value_box">{{ seeData.sick_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">严重迟到次数</div>
          <div class="value_box">{{ seeData.serious_late }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">年假（天）</div>
          <div class="value_box">{{ seeData.annual_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">旷工迟到次数</div>
          <div class="value_box">{{ seeData.absenteeism }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">产假（天）</div>
          <div class="value_box">{{ seeData.maternity_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">早退次数</div>
          <div class="value_box">{{ seeData.leave_early }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">陪产假（天）</div>
          <div class="value_box">{{ seeData.paternity_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">缺卡次数</div>
          <div class="value_box">{{ seeData.missing }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">婚假（天）</div>
          <div class="value_box">{{ seeData.marriage_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">加班（小时）</div>
          <div class="value_box">{{ seeData.work_overtime }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">丧假（天）</div>
          <div class="value_box">{{ seeData.funeral_leave }}</div>
        </div>
        <div class="list_boxses">
          <div class="title_xinxi">出差（天）</div>
          <div class="value_box">{{ seeData.business_trip }}</div>
        </div> -->
        <!-- 表格头 -->
        <div class="wgs-table-header">
          <div class="wgs-table-header-items">员工</div>
          <div class="wgs-table-header-items">工号</div>
          <div class="wgs-table-header-items">入职日期</div>
          <div class="wgs-table-header-items">应出勤天数</div>
          <div class="wgs-table-header-items">实际出勤天数</div>
          <div class="wgs-table-header-items">外勤（天）</div>
          <div class="wgs-table-header-items">旷工（天）</div>
          <div class="wgs-table-header-items">迟到（次）</div>
          <div class="wgs-table-header-items">严重迟到（次）</div>
        </div>
        <!-- 表格体 -->
        <div class="wgs-table-body">
          <div class="wgs-table-body-items" v-if="seeData">{{ seeData.user_name }}</div>
          <div class="wgs-table-body-items">{{seeData.en_code}}</div>
          <div class="wgs-table-body-items">{{seeData.officeDate }}</div>
          <div class="wgs-table-body-items">{{seeData.should_attendance_num}}</div>
          <div class="wgs-table-body-items">{{seeData.real_attendance_num}}</div>
          <div class="wgs-table-body-items">{{seeData.field_time}}</div>
          <!-- 旷工（天） -->
          <div :class="seeData.absenteeism_late > 0 ? 'hours-danger1':'wgs-table-body-items'">{{seeData.absenteeism_late}}</div>
          <!-- 迟到 -->
          <div :class="seeData.late > 0 ? 'hours-danger1':'wgs-table-body-items'">{{seeData.late}}</div>
          <div class="wgs-table-body-items">{{seeData.serious_late}}</div>
        </div>
        <!-- 表格头 -->
        <div class="wgs-table-header">
          <div class="wgs-table-header-items">考勤组</div>
          <div class="wgs-table-header-items">部门</div>
          <div class="wgs-table-header-items">转正日期</div>
          <div class="wgs-table-header-items">考勤月份</div>
          <div class="wgs-table-header-items">外出（小时）</div>
          <div class="wgs-table-header-items">事假（小时）</div>
          <div class="wgs-table-header-items">缺卡（次）</div>
          <div class="wgs-table-header-items">早退（次）</div>
          <div class="wgs-table-header-items">旷工迟到（次）</div>
        </div>
        <!-- 表格体 -->
        <div class="wgs-table-body">
          <div class="wgs-table-body-items">{{seeData.group_name}}</div>
          <div class="wgs-table-body-items">{{seeData.dept_name }}</div>
          <div class="wgs-table-body-items">{{seeData.regular_date ? seeData.regular_date : '暂未转正'}}</div>
          <div class="wgs-table-body-items">{{seeData.schedual_month}}</div>
          <div class="wgs-table-body-items">{{seeData.go_out}}</div>
          <div class="wgs-table-body-items">{{seeData.compassionate_leave}}</div>
          <!-- 缺卡（次） -->
          <div :class="seeData.missing > 0 ? 'hours-danger1':'wgs-table-body-items'">{{seeData.missing}}</div>
          <!-- 早退（次） -->
          <div :class="seeData.leave_early > 0 ? 'hours-danger1':'wgs-table-body-items'">{{seeData.leave_early}}</div>
          <div class="wgs-table-body-items">{{seeData.absenteeism}}</div>
        </div>
         <!-- 表格头 -->
         <div class="wgs-table-header">
          <div class="wgs-table-header-items">年假（天）</div>
          <div class="wgs-table-header-items">调休（小时）</div>
          <div class="wgs-table-header-items">病假（小时）</div>
          <div class="wgs-table-header-items">产假（天）</div>
          <div class="wgs-table-header-items">陪产假（天）</div>
          <div class="wgs-table-header-items">婚假（天）</div>
          <div class="wgs-table-header-items">丧假（天）</div>
          <div class="wgs-table-header-items">出差（天）</div>
          <div class="wgs-table-header-items">加班（小时）</div>
        </div>
        <!-- 表格体 -->
        <div class="wgs-table-body">
          <div class="wgs-table-body-items">{{seeData.annual_leave}}</div>
          <div class="wgs-table-body-items">{{seeData.compensatory_leave }}</div>
          <div class="wgs-table-body-items">{{seeData.sick_leave}}</div>
          <div class="wgs-table-body-items">{{seeData.maternity_leave}}</div>
          <div class="wgs-table-body-items">{{seeData.paternity_leave}}</div>
          <div class="wgs-table-body-items">{{seeData.marriage_leave}}</div>
          <div class="wgs-table-body-items">{{seeData.funeral_leave}}</div>
          <div class="wgs-table-body-items">{{seeData.business_trip}}</div>
          <div class="wgs-table-body-items">{{seeData.work_overtime}}</div>
        </div>
      </div>
      <div class="closed">
        <el-button @click="userDialog = false" >关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { monthRecord, monthCount, monthRecordInfo } from "@/api/organization/myAttendance";
import { deepClone } from '@/util/util';
import request from '@/router/axios';
import { baseUrl } from '@/config/env';
export default {
  name: "myAttendance",
  data() {
    return {
      year_month: "", //
      loading: false,
      headDate: '',
      // 头部月度统计
      headMonthData: {
        average_working_hours: 0, // 平均工时
        late: 0, // 迟到次数
        leave_early: 0, // 早退次数
        missing: 0, // 缺卡次数
        absenteeism: 0, // 旷工次数
        field: 0, // 外勤次数
        work_overtime: 0, // 加班小时
        business_trip: 0, // 出差天数
        ask_leave: 0, // 请假次数
      },
      // 表格数据
      tableData: {},
      // 表格详情
      seeData: {},
      userDialog: false,
    };
  },
  async created() {
  },
  async mounted() {
    this.headDate = this.toDay()
    this.year_month = this.getMonthData()
    await this.getMonthRecord()
    await this.getList()
  },
  watch: {
    year_month(val) {
      if (val) {
        this.headDate = this.toDay(val)
      } else {
        this.headDate = this.toDay(this.getMonthData())
      }
    }
  },
  methods: {
    // 转成时间戳
    getMonthData() {
      let myDate = new Date()
      let myYear = myDate.getFullYear()
      let myMonth = (myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1)
      let monthTime = new Date(myYear + '-' + myMonth).getTime()
      return monthTime
    },
    // 转成日期 年 月
    toDay(time) {
      let date = new Date(parseInt(time));
      let Year = date.getFullYear();
      let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
      return Year + '-' + Moth
    },
    // 转成日期 年 月 日
    toDate(time) {
      if (time) {
        let date = new Date(parseInt(time));
        let Year = date.getFullYear();
        let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
        let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
        return Year + '-' + Moth + '-' + Day
      } else {
        return ''
      }
    },
    // 获取个人月度综合考勤数据
    getMonthRecord() {
      let params = {
        year_month: this.year_month ? this.year_month : this.getMonth()
      }
      monthRecord(params).then(res => {
        if (res.data.success) {
          this.headMonthData = deepClone(res.data.data)
        }
      })
    },
    // 获取表格数据
    getList() {
      this.loading = true
      let params = {
        year_month: this.year_month ? this.year_month : this.getMonthData()
      }
      monthCount(params).then(res => {
        if (res.data.success) {
          this.tableData = deepClone(res.data.data)
          this.loading = false
        }
      })
    },
    // 选择月
    searchHandle() {
      this.getList()
      this.getMonthRecord()
    },
    // 查看详情
    toDetails() {
      this.userDialog = true;
      let params = {
        year_month: this.tableData.att_date,
        user_id: this.tableData.user_id
      }
      monthRecordInfo(params).then(res => {
        if (res.data.success) {
          this.seeData = res.data.data
        }
      })
    },
    // 导出打卡详情
    exportDetail() {
      request({
        url: `${baseUrl}/schedual/owner/excel/record?user_id=${this.tableData.user_id}&year_month=${this.tableData.att_date}`,
        method: 'get',
        responseType: 'blob'
      }).then((res) => {
        const ct = res.data
        let url = window.URL.createObjectURL(new Blob([ct], {
          type: "application/octet-stream;charset=utf-8",
        }));
        let excelName = '打卡详情.xls';
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', excelName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
    // 导出打卡数据
    exportData() {
      request({
        url: `${baseUrl}/schedual/owner/excel/statistics?user_id=${this.tableData.user_id}&year_month=${this.tableData.att_date}`,
        method: 'get',
        responseType: 'blob'
      }).then(res => {
        const ct = res.data
        let url = window.URL.createObjectURL(new Blob([ct], {
          type: "application/octet-stream;charset=utf-8",
        }));
        let excelName = '统计详情.xls';
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', excelName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    }
  },
};
</script>

<style scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.border {
  border: 1px solid red;
}

.company_name {
  width: 90%;
  height: 40px;
  margin: 0 auto;
  font-size: 18px;
  color: #333;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 8px;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.search_box {
  width: 96%;
  margin: 0 auto;
  height: 40px;
  display: flex;
  flex-direction: row;
}

.search-box-left{
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-box-right{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.el_input_width {
  width: 200px;
  height: 32px !important;
  margin-left: 8px;
}

::v-deep .el-input__inner {
  height: 32px !important;
}

.el_date_width {
  height: 32px !important;
  margin-left: 24px;
}

.search_btn {
  margin-left: 24px;
}

.analysis {
  width: 96%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.table_box {
  margin: 8px;
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  box-shadow: 0px 0px 1px 1px #f8f8f8;
}

.left1 {
  width: 30%;
  height: 300px;
  box-shadow: 0px 0px 1px 1px #f8f8f8;
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  margin: 8px;
}

.content_listbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 24px;
}

.list_boxses {
  width: 49%;
}

.list_boxses:nth-child(even) {
  margin-left: 15px;
}

.value_box {
  padding-left: 5px;
  height: 25px;
  background-color: rgb(237, 234, 234);
  border-radius: 5px;
  line-height: 25px;
}

.smoem {
  margin-left: 5px;
  margin-right: 5px;
}

.COLOR {
  color: rgb(3, 168, 94);
  border: none;
}

.flex2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.analysis_list {
  display: flex;
  justify-content: space-around;
}

.analysis_title {
  font-weight: 500;
  margin-left: 10px;
  margin-top: 10px;
}

.chnjsge {
  width: 95%;
  margin: 0 auto;
  display: flex;

  border-bottom: 1px solid rgb(247, 244, 244);
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.select_box {
  display: flex;
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
  justify-content: space-between;
}

.select_box_left {
  width: 40%;
}

.select_box_content {
  width: 25%;
}

.select_box_right {
  width: 25%;
}


.analysis_list li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border-right: 1px solid #DEDEDE;
}

@media screen and (max-width: 1440px) {
  .analysis_list li {
    margin: 0 8px;
  }
}


.analysis_list li>div:last-child {
  color: rgb(210, 207, 207);
  font-size: 12px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #999999;
}

.right1 {
  width: 100%;
  height: 100px;
  box-shadow: 0px 0px 1px 1px #f8f8f8;
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  margin: 8px;
}

.mingxi {
  width: 95%;
  height: 40px;
  margin: 0 auto;
  border-bottom: 1px solid #f8f8f8;
}

.mingxi1 {
  width: 95%;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  font-size: 14px;
  color: #999;
}

.mingxi>div {
  line-height: 40px;
  font-size: 14px;
  color: #999;
}

.top,
.bottom {
  height: 130px;
}

.top {
  width: 340px;
  margin: 0 auto;
}

.height1 {
  width: 100%;
  height: 1px;
  background: #f8f8f8;
}

.bottom {
  width: 640px;
  margin: 0 auto;
}

.items {
  width: 90px;
  height: 90px;
}

.items>p {
  line-height: 0.5em;
}

.items1 {
  width: 90px;
  height: 60px;
}

.items1>p {
  line-height: 0.5em;
}

.numberss {
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-top: 25px;
}

.numberss1 {
  font-size: 16px;
  color: #333;
  text-align: center;
}

.numberss1:hover {
  color: #0063f5;
  cursor: pointer;
}

.numberss:hover {
  color: #0063f5;
  cursor: pointer;
}

.titless {
  font-size: 14px;
  color: #999;
  text-align: center;
}

.blue_spot {
  display: block;
  width: 8px;
  height: 8px;
  background: #0063f5;
  border-radius: 50%;
  position: relative;
  top: 8px;
}

.red_spot {
  display: block;
  width: 8px;
  height: 8px;
  background: #f67e7e;
  border-radius: 50%;
  position: relative;
  top: 8px;
}

.color_blue {
  color: #0063f5 !important;
}

.color_red {
  color: #f67e7e !important;
}

.circular {
  width: 100%;
  height: 180px;
}

.table_title {
  width: 95%;
  margin: 16px auto 0;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #333333;
}

.table_header {
  height: 50px;
  background: #F2F2F6;
  border: 1px solid #DEDEDE;
}

.table_body {
  height: 50px;
  margin: 4px 8px;
  border-radius: 4px;
}

.table_body:hover {
  background: #f2f2f2;
}

.table_header_items {
  flex: 1;
  height: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #333333;
}

.table_body_items {
  flex: 1;
  height: 50px;
  font-size: 14px;
  color: #666666;
  text-align: center;
  line-height: 50px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.table_header_items1 {
  width: 24px;
  height: 24px;
  color: #333;
  text-align: center;
}

.table_header_items1:hover {
  cursor: pointer;
}

.table_header_items2 {
  width: 40px;
  height: 24px;
  color: #333;
  text-align: center;
  line-height: 24px;
  visibility: hidden;
}

.user_name {
  color: #0063f5;
  cursor: pointer;
}

.user_names {
  color: rgba(221, 52, 22, 0.972);
  cursor: pointer;
}

er_names.user_namese:hover {
  cursor: pointer;
}

/* css */
.main-container {
  height: 100%;
  padding: 0 8px;
  background-color: #fff;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
}
.analysis_list1{
  display: flex;
  margin-top: 20px;
  justify-content: flex-start;
}
.manager-box {
  display: flex;
}

div /deep/ .el-form div:nth-child(odd) .el-form-item .el-form-item__label {
  text-align: right;
}

.authorizedialog /deep/.el-dialog {
  height: calc(100% - 18vh);
  margin-bottom: 0;
}

.authorizedialog /deep/.el-dialog__body {
  height: calc(100% - 114px);
}
.hourss{
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #333333;
  text-indent: 2em;
}
.yes{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FD513B;
}
.no{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}

.wgs-table-header{
  width:100%;
  height: 40px;
  background: #F2F2F6;
  display: flex;
  flex-direction: row;
}
.wgs-table-body{
  width:100%;
  height: 40px;
  background: #fff;
  display: flex;
  flex-direction: row;
}
.wgs-table-header-items{
  width: 11.11111%;
  height: 100%;
  border: 1px solid #DEDEDE;
  font-size: 14px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #333333;
  line-height: 40px;
  text-align: center;
}
.wgs-table-body-items{
  width: 11.11111%;
  height: 100%;
  border: 1px solid #DEDEDE;
  font-size: 14px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
  text-align: center;
}
.closed{
  margin: 0 24px;
  height: 40px;
  text-align: right;
}
.hours{
  font-size: 18px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #333333;
}
.hours-danger{
  font-size: 18px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #FE8B04;
}

.hours-danger1{
  width: 11.11111%;
  height: 100%;
  border: 1px solid #DEDEDE;
  font-size: 14px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
  color: #FE8B04;
}

.no-data-box{
  text-align: center;
}
.no-data-box > img{
  margin: 100px auto;
}
</style>
